<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		
		<link rel="stylesheet" type="text/css" href="../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css"/>
		<style type="text/css">
			
			
			
			.content{
				width: 100%;
				background-color: #F2F2F2;
				padding: 10px;
			}
			.search{
				display: flex;
				justify-content: center;
				align-content: center;
				padding: 10px;
				background-color: white;
			}
			
			.stext{
				width: 25%;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				border-right:1px solid #C7C7CC;
			}
			.simg{
				width: 30px;
				height: 30px;
			}
			.simg>img{
				width: 100%;
				height: 100%;
			}
			.ssdiv{
				width: 75%;
			}
			.ssinp{
				width: 100%;
				height: 100%;
				border: 0;
				padding-left: 10px;
			}
			
			::-webkit-input-placeholder{
				font-size: 0.8em;
				color: #999999;
			} 
			.sjx{
				margin: auto;
				width: 0;
				height: 0;
			    border:10px solid transparent;
				border-top: 10px solid #000000;
				position: relative;
				top: 20%;
			}
			.cancell{
				width: 100%;
				padding: 10px;
			}
			.checklist{
				background-color: white !important;
				border-radius: 0.5em;
				margin: 5px auto;
			}
			.toptext{
				display: flex;
				align-items: center;
				justify-content: space-between;
				
			}
			.toptext>span{
				padding: 2px;
			}
			
			
			.listdivcss{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: white;
				border-radius: 0.5em;
				margin: 0.2em 0;
			}
			
			.mui-checkbox input[type=checkbox]{
				top: 0px !important;
			}
			*{
				font-size: 0.98em;
			}
			.flex1{
				width: 85%;
				padding: 0.5em;
			}
			
			.dheader{
				width: 100%;
				display: flex;
				justify-content: center;
				align-content: center;
				background-color: white;
				border-bottom: 1px solid #C7C7CC;
			}
			.dheader>div{
				/*width: 25%;*/
				width: 50%;
				height: 3em;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 0.95em;
				border-right: 1px solid #C7C7CC;
			}
			.dheader>div:last-child{
				border: 0;
			}
			.brno{
				border-right: 0 !important;
			}

			.sjx{
				width: 0;
				height: 0;
				margin: 2px;
			    border:6px solid transparent;
				border-top: 6px solid #000000;
				position: relative;
				top: 15%;
			}
			.listdiv{
				padding: 11px;
			}
		</style>
	</head>

	<body>
		
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">挂单列表</h1>
		</header>
		<div id="refreshContainer"  class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
		    <div class="content">
		    	<div class="search">
		    		<div class="stext fe09" id="stext">
		    			全部
		    			<div class="sjx">
		    			</div>
		    		</div>
		    		<div class="ssdiv">
		    			<form action="" onkeydown="if(event.keyCode==13)return false;">
							<input id="keyvalue" class="ssinp" type="" placeholder="单据号/昵称" />
						</form>
						<!--
                        	作者：592176224@qq.com
                        	时间：2019-03-14
                        	描述：
		    			<input class="ssinp" type="" name="" id="ssinp" value=""  placeholder="请输入单据号/姓名"/>
                        -->
		    		</div>
		    		<div class="simg" id="ssbut">
		    			<img src="../img/ss-img2.png"/>
		    		</div>
		    	</div>
		    </div>
		    
		    <div class="cancell">
		    	<div class="dheader">
			    		<div class=""  id="store">
			    			所有店面
			    			<div class='sjx'>
			    				<!--
                                	作者：592176224@qq.com
                                	时间：2019-03-14
                                	描述：
                                	<div class="bc"></div>
                                	<div class="tr"></div>
                                -->
							</div>
			    		</div>
			    		<div class="" id="employee">
			    			所有工号
			    			<div class='sjx'>
			    				<!--
                                	作者：592176224@qq.com
                                	时间：2019-03-14
                                	描述：
                                	<div class="bc"></div>
                                	<div class="tr"></div>
                                -->
							</div>
			    		</div>
			    		<!--
                        	作者：592176224@qq.com
                        	时间：2019-03-14
                        	描述：
                       
			    		<div class="" id="data">
			    			日期
			    			<div class='sjx'>
			    				
                                	<div class="bc"></div>
                                	<div class="tr"></div>
                               
							</div>
			    		</div>
			    		 -->
		    	</div>
		    	<div class="" id="canlist">
		    		<!--
                    	作者：592176224@qq.com
                    	时间：2019-01-30
                    	描述：
                 
		    		<div class="listdivcss">
		    			<div class="">
		    				<div class="toptext fs1">
		    		    		<span id="">
		    		    			XF565651651651656
		    		    		</span>
		    		    		<span style="color: orange;">
		    		    			￥100.00
		    		    		</span>
		    		    	</div>
		    		    	<div class="toptext fs07">
		    		    		<span id="">
		    		    			某某（12025541551）
		    		    		</span>
		    		    	</div>
		    		    	<div class="toptext fs08">
		    		    		<span id="">
		    		    			2018-12-15 12:18:00
		    		    		</span>
		    		    		<span>
		    		    			已退单
		    		    		</span>
		    		    		<span id="">
		    		    			<span style="color: orange;">
		    		    				点击结账
		    		    			</span>
		    		    		</span>
		    		    	</div>
		    		    	</div>	
			    		<div class="mui-input-row mui-checkbox checklist">
			    		    <label></label>
			    		    <input name="Checkbox" type="checkbox" checked>
			    		</div>
		    		</div>
		    		   -->
		    		
		    	</div>
		    	<div class="morediv hidden" id="moreid">
				   	<span id="more_list">更多</span>
				</div>
		    	 <div class="fgd"></div>
		    </div>
		    </div>
		   
		    <div class="footdiv">
		    	<div class="fleft">
		    		<div class="mui-input-row mui-checkbox ">
		    		    <label>全选</label>
		    		    <input name="Checkbox" id="checkall" type="checkbox">
		    		</div>
		    	</div>
		    	<div class="fright" id="delid">
		    		删除
		    	</div>
		    </div>
		    
		    
		    
			
			<!--
            	作者：592176224@qq.com
            	时间：2019-04-01
            	描述：
            
		    <div id="forward" class="mui-popover mui-popover-action mui-popover-bottom">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a href="#" data-id="4">微信支付</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="#" data-id="5">支付宝支付</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="#" data-id="2">现金支付</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="#" data-id="6">银行卡记账</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="#" data-id="7">其他</a>
					</li>
				</ul>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a href="#forward"><b>取消</b></a>
					</li>
				</ul>
			</div>
			-->
		</div>
		<div id="popover" class="mui-popover">
			   <div class="listdiv">
			   		<ul class="mui-table-view">
			   			<li class="mui-table-view-cell mui-radio mui-left">
							<input name="radio" value="2" type="radio" checked="checked">现金支付
						</li>
						<li class="mui-table-view-cell mui-radio mui-left">
							<input name="radio" value="4" type="radio">微信支付
						</li>
						<li class="mui-table-view-cell mui-radio mui-left">
							<input name="radio" value="5" type="radio">支付宝支付
						</li>
						<li class="mui-table-view-cell mui-radio mui-left">
							<input name="radio" value="6" type="radio">银行卡记账
						</li>
						<li class="mui-table-view-cell mui-radio mui-left">
							<input name="radio" value="7" type="radio">其他
						</li>
				</ul>
			   		
			   </div>
			   <button type="button" id="okbut" class="mui-btn mui-btn-blue mui-btn-block">确定</button>
		</div>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/setStopped.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var page = 1,
			plist = [],
			type = 'all',	//订单类型
			product = [],	//存放需要删除订单的数组
			flag = false,	//设置上拉加载（无数据后设置true）
			store_id = 0,		//门店id
			employee_id = 0, //员工id
			date_type = "date",	//时间参数日期和时间段
			datetime = "today", 	//时间参数为日期  生效  today今天 month本月
			start_time = "",	//时间段
			end_time = "",
			pay_id = 0,			//支付方式id
			key_type = "",
			order_number = 0;	//订单id
			window.onload = function(){
				mui.init({
					 pullRefresh: {
				        container: '#refreshContainer',
				        down: {
				        	height:50,//可选,默认50.触发下拉刷新拖动距离,
					      	auto: false,//可选,默认false.首次加载自动下拉刷新一次
					     	contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
					      	contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
					      	contentrefresh : "正在刷新...",
				            callback: pulldownRefresh
				        },
				        up:{
				        	callback: pullupRefresh
				        }
				    }
				});
				function pullupRefresh(){
					more_list();
					mui('#refreshContainer').pullRefresh().endPullupToRefresh();
				}
				function pulldownRefresh(){
					page = 1;
		      		plist = [];
		      		upToRefresh();
		      		getcamlist();
				}
				
				//mui('.mui-scroll-wrapper').scroll();
				document.getElementById('checkall').addEventListener('change',function() {
		            var listBox = mui('.listcheckbox');
		            if (this.checked) {
		                listBox.each(function() {
		                    this.checked = true;
		                    product.push({id:this.value});
		                })
		            } else {
		                listBox.each(function() {
		                    this.checked = false;
		                })
		                product = [];
		            }
		        })
				//删除订单
				g("delid").addEventListener("tap",function(e){
					mui.confirm("是否确认删除订单","",["取消","确定"],function(e){
						if(e.index == 1){
							var data= {
								url:"/api/order/sdel",
								data:{
									access_token:acctoken(),
									product:product,
								}
							}
							ajax(data,function(res){
								console.log("返回",res);
								mui.toast(res.msg);
								page = 1;
								plist = [];
            					upToRefresh();
								getcamlist();
							})
						}
						
					})
				})
				
				$("#canlist").on("tap",".payclass",function(){
					order_number = $(this).attr("data-oid");
					mui('#popover').popover('toggle',this);
				})
				
				//监听确定
				g("okbut").addEventListener("tap",function(e){
					
					mui.confirm("是否确认结账","",["取消","确定"],function(e){
						if(e.index == 1){
							var pay_id = $("input[name='radio']:checked").val()||0;
							if(pay_id <= 0){
								mui.toast("请选择支付方式！");
								return;
							}
							mui('#popover').popover('hide');
							var data= {
								url:"/api/order/pay",
								data:{
									access_token:acctoken(),
									order_number:order_number,
									pay_id:pay_id
								}
							}
							ajax(data,function(res){
								console.log("返回",res);
								mui.toast(res.msg);
								page = 1;
								plist = [];
            					upToRefresh();
								getcamlist();
							})
						}
					})
					
					
				})
				
				mui.ready(function() {
					var stext = g('stext');
					//var allid = g('allid');
					var store = g("store");
					var employee = g("employee");
                var stextPicker = new mui.PopPicker();
                stextPicker.setData([{
                    value: "",
                    text: '全部'
                }, {
                    value: "order_number",
                    text: '单据号'
                }, {
                    value: "username",
                    text: '会员昵称'
                }, {
                    value: "phone",
                    text: '手机号'
                }, {
                    value: "card_number",
                    text: '卡号'
                }, {
                    value: "plate_number",
                    text: '车牌号'
                }]);
                 stext.addEventListener('tap', function(event) {
                 	mui('#refreshContainer').pullRefresh().setStopped(true);//暂时禁止滚动	
	                stextPicker.show(function(items) {
	                    	page = 1;
	                    	plist = [];
            				upToRefresh();
	                    	stext.innerHTML =  '<div>'+items[0].text+'</div><div class="sjx"></div>';
	                    	key_type = items[0].value;
	                    	//getcamlist();
	                    });
	                }, false);
	                
	                //门店列表
	                var jsondata = {
	                	url:"/api/store/lst",
	                	data:{
	                		access_token:acctoken(),
	                	}
	                }
	                ajax(jsondata,function(res){
	                	console.log("门店列表",res);
		                var storePicker = new mui.PopPicker();
		                var list2 = [];
		                res.data.forEach(function(item,index){
		                	var str = {
		                		value: item.id,
		                    	text: item.store_name
		                	}
		                	list2.push(str);
		                })
		                storePicker.setData(list2);
	                	store.addEventListener('tap', function(event) {
	                		mui('#refreshContainer').pullRefresh().setStopped(true);//暂时禁止滚动	
		                    storePicker.show(function(items) {
		                    	store_id = items[0].value;
		                    	store.innerHTML =  '<div>'+items[0].text+'</div><div class="sjx"></div>';
			               		page = 1;
			               		plist = [];
            					upToRefresh();
			               		getcamlist();
		                    });
		                }, false);
		                
		                
	                })
              		//员工列表
	                var jsondata2 = {
	                	url:"/api/employee/lst",
	                	data:{
	                		access_token:acctoken(),
	                		store_id:store_id != 0 ? store_id:""
	                	}
	                }
	                ajax(jsondata2,function(res){
	                	console.log("员工列表",res);
		                var employeePicker = new mui.PopPicker();
		                var list2 = [];
		                res.data.data.forEach(function(item,index){
		                	var str = {
		                		value: item.id,
		                    	text: item.username
		                	}
		                	list2.push(str);
		                })
		                employeePicker.setData(list2);
	                	employee.addEventListener('tap', function(event) {
	                		mui('#refreshContainer').pullRefresh().setStopped(true);//暂时禁止滚动	
		                    employeePicker.show(function(items) {
		                    	employee_id = items[0].value;
		                    	employee.innerHTML =  '<div>'+items[0].text+'</div><div class="sjx"></div>';
			                	page = 1;
			                	plist = [];
			                	getcamlist();
		                    });
		                }, false);
	                })	
              
              		
            });
            //监听搜索
            g("ssbut").addEventListener("tap",function(e){
            	page = 1;
			    plist = [];
            	upToRefresh();
            	getcamlist();
            })
            
            //更多
			g("more_list").addEventListener("tap",function(){
				more_list();
			})
            
            document.onkeydown = function(event) {
						var e = event || window.event || arguments.callee.caller.arguments[0];
						if(e && e.keyCode == 13) {
							page = 1;
						    plist = [];
			            	upToRefresh();
							getcamlist();
						}
					}
            
           	getcamlist();
			}
			
			//更多
			function more_list(){
				page++;
				getcamlist();
			}
			
			function onshow(){
				page = 1;
				plist = [];
				getcamlist();
			}
			
			function setcheckbox(e){
				if(e.checked){
					product.push({id:e.value});
				}else{
					document.getElementById('checkall').checked = false;
					for (var i = 0; i < product.length; i++) {
						if (product[i].id == e.value) {
							product.splice(i, 1);
						}
					}
				}
			}
			
			
			//获取挂单列表
			function getcamlist(){
					var data = {
						url:"/api/order/lst",
						data:{
							access_token:acctoken(),
							store_id:store_id!=0?store_id:"",
							employee_id:employee_id!=0?employee_id:"",
							key:g("keyvalue").value||"",
							order_status:2,
							key_type:key_type,
							page:page
						}
					}
					ajax(data,function(res){
						console.log("挂单列表",res);
						
						let list = res.data.data;
							if(list.length > 0){
								list.forEach(function(item,index){
									plist.push(item);
								})
								plist = remove_duplicate(plist);
								setcamlist(plist);
								$("#moreid").removeClass("hidden");
								if(list.length < res.data.per_page){
									$("#moreid").addClass("hidden");
								}
							}else{
								if(page == 1){
									var str = '<div class="nolistdiv">暂无记录<div>';
									g("canlist").innerHTML = str;
									$("#moreid").addClass("hidden");
								}else{
									upToRefresh();
									page--;
									$("#moreid").addClass("hidden");
									mui.toast('没有更多数据了');
								}
							}
						
					})
			}
			
			//重置上拉
			function upToRefresh(){
				mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
				mui('#refreshContainer').pullRefresh().refresh(false);
			}
			function setcamlist(list){
					var str = '';
					if(list.length>0){
						for(var i = 0; i < list.length; i++){
							str += '<div class="listdivcss"><div class="flex1">'+
							'<div class="toptext"><span class="">'+
			    		    list[i].order_number+
			    		    '</span><span style="color: orange;">￥'+
			    		    list[i].order_money+
			    		    '</span></div><div class="toptext"><span class="">';
			    		    try{
			    		    	str +=  list[i].order_member_msg.username+'（'+list[i].order_member_msg.card_number+'）';
			    		    }catch(e){
			    		    	str += '散客';
			    		    }
			    		    str += '</span></div><div class="toptext"><span class="">'+
			    		    list[i].createtime+
			    		    '</span><span class="">'+
			    		    list[i].order_status+
			    		    '</span><span class="">';
			    		    if(list[i].order_status != "已付款"){
			    		    	str +='<span style="color: orange" class="payclass" data-oid="'+list[i].order_number+'">点击结账</span>';
			    		    }else{
			    		    	str +='<span style="color: white" >订单已结</span>';
			    		    }
			    		    str += '</span></div></div>'+
			    		    '<div class="mui-input-row mui-checkbox checklist">'+
			    		    '<label></label>'+
			    		    '<input name="Checkbox" value="'+list[i].id+'" class="listcheckbox" onchange="setcheckbox(this)" type="checkbox"></div></div>';
						}
					}else{
						str = "<div class='nolistdiv'>暂无挂单</div>"
					}
					g("canlist").innerHTML = str;
					
			}
			
			function pay(e,oid){
				order_number = oid;
				mui('#popover').popover('toggle',e);
			}
		</script>
	</body>

</html>